<template>
	<view class="page">

		<view class="nav nav_bar flex_r_between"
			:style="`background: rgba(255, 255, 255,${trans});padding-left: 32rpx;padding-right: 32rpx;`">
			<view class="icon_btn flex_r_around" @click="$util.back()"
				:style="`background-color: rgba(0, 0, 0, 0.3;`">
				<uni-icons type="back" size="20" color="#FFF"></uni-icons>
			</view>

			<view class="flex_center">
				
				<view class="actions flex_r_around" @click="beforeAccept" v-if="data.status == 1">
					<text>拒绝</text>
				</view>
				
				<view class="actions flex_r_around" style="background: #1FC129;" @click="onAgree" v-if="data.status == 1">
					<text>同意</text>
				</view>
			</view>
		</view>

		<view class="banner">
			<swiper class="swiper-box" @change="change" :current="current">
				<swiper-item v-for="(item, index) in images" :key="index">
					<image @click="$util.previewImage(images, index)" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<view class="banner_preview">
				<scroll-view scroll-x="true">
					<view class="banner_list flex_center">
						<image :src="item" mode="aspectFill" v-for="(item,index) in images" :key="index"
							:id="index == current ? 'select' : ''" @click="current = index"></image>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="body">
			

			<view class="title">{{ data.title || '' }}</view>

			<view class="price flex_center">
				<view>{{ Number(data.active_price) == 0 ? '免费' : data.active_price }}</view>
				<text v-if="Number(data.active_price) != 0">元/人</text>
			</view>

			<view class="list flex_center">
				<image :src="$util.prefix('active/active_list_icon_adate.png')"></image>
				<text>截止 {{ data.end_time_text || '无限期' }}</text>
			</view>

			<view class="list flex_center" v-if="data.active_address">
				<image :src="$util.prefix('active/active_list_icon_address.png')"></image>
				<text>{{ data.active_city }}{{ data.active_district }}{{ data.active_address }}</text>
			</view>
			
			<view class="user flex_center">
				<view class="info flex_center">
					<view class="avatar">
						<image :src="data.avatar" mode="aspectFill" class="image"></image>
						<image :src="$util.prefix('circle/v_icon.png')" mode="aspectFill" class="icon"
							v-if="data.is_vip"></image>
					</view>
			
					<view class="text">
						<view class="top flex_center">
							<view class="hidden">{{ data.nickname || '' }}</view>
							<text>ID {{ data.user_id }}</text>
							<image @click="onCopy(111)" :src="$util.prefix('public/copy.png')" mode="aspectFill">
							</image>
						</view>
						<view class="bottom flex_center">
							<image :src="$util.prefix(`public/sex_${data.gender}_no_bg.png`)" mode=""></image>
							<text>{{ data.age }}岁</text>
							<text>IP属地：{{ data.city || '未知' }}</text>
						</view>
					</view>
				</view>
			
				<view class="button">
					
				</view>
			
			</view>
			

			<view class="line"></view>

			<view class="people" v-if="data.apply_list && data.apply_list.length">
				<view class="people_title">已参与成员({{ data.apply_list.length }}人)</view>
				<view class="people_list">
					<scroll-view scroll-x="true">
						<view class="flex_center">
							<view class="people_item flex_c" v-for="(item,index) in data.apply_list" :key="index">
								<view class="people_avatar">
									<image :src="item.avatar" mode="aspectFill"></image>
								</view>
								<text class="hidden">{{ item.nickname || '' }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="rich">
				<view class="rich_title">活动介绍</view>
				<view class="rich_content">
					<textarea v-model="data.intro" disabled :auto-height="true"></textarea>
				</view>
			</view>

		</view>
		
		<u-popup :show="show" @close="show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>拒绝原因</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show = false"></u-icon>
				</view>
		
				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="check_content"></textarea>
				</view>
		
				<view class="modal_btn flex_r_around" @click="onAccept">
					<text>确定</text>
				</view>
		
			</view>
		</u-popup>

	</view>
</template>

<script>
	import wLoading from "@/components/w-loading/w-loading.vue";
	export default {
		components: {
			wLoading,
		},
		data() {
			return {
				id: 0,

				circle_id: 0,

				images: [

				],

				data: {},

				trans: 0,

				current: 0,
				
				check_content: '',
				show: false,

			}

		},
		methods: {

			getDetail() {
				this.$get('/loyou/getLoyouInfo', {
					loyou_id: this.id
				}).then(res => {
					this.data = res.data;
					this.images = res.data.images.split(',');
				})
			},

			change(e) {
				this.current = e.detail.current;
			},

			onCopy(str) {
				uni.setClipboardData({
					data: `${str}`,
					showToast: false,
					success: () => {
						this.$util.msg('已复制到剪贴板');
					}
				});
			},
			
			beforeAccept(){
				this.show = true;
			},
			
			onAccept(){
				this.show = false;
				this.$post('/circle.loyou/setReviewStatus',{
					loyou_id: this.id,
					status: 3,
					check_content: this.check_content,
					circle_id: this.circle_id,
				}).then(res=>{
					this.$util.msg(res.msg);
					this.$util.back();
				})
			},
			
			onAgree(item){
				this.$post('/circle.loyou/setReviewStatus',{
					loyou_id: this.id,
					status: 2,
					circle_id: this.circle_id,
				}).then(res=>{
					this.$util.msg(res.msg);
					this.$util.back();
				})
			},


		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.id = option.id || 0;
			this.circle_id = option.circle_id || 0;
			this.getDetail();

		},

		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop <= 200) {
				this.trans = e.scrollTop / 200;
			} else {
				this.trans = 1
			}
		},
	}
</script>

<style lang="less" scoped>
	.page {
		background: #FFF;
		min-height: 100vh;
		padding-bottom: 130rpx;
	}

	.nav {
		.icon_btn {
			width: 30px;
			height: 30px;
			border-radius: 15px;

			image {
				width: 30px;
				height: 30px;
			}
		}

		.actions {
			width: 128rpx;
			height: 52rpx;
			background: #FD2A53;
			border-radius: 28rpx;
			margin-right: 12rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
	}

	.banner {
		width: 100vw;
		height: 1080rpx;
		overflow: hidden;
		position: relative;

		.swiper-box {
			width: 100vw;
			height: 1080rpx;

			swiper-item {
				width: 100vw;
				height: 1080rpx;

				image {
					width: 100vw;
					height: 1080rpx;
					display: block;
				}
			}
		}

		.banner_preview {
			padding: 32rpx;
			position: absolute;
			bottom: 150rpx;
			left: 0;
			overflow: hidden;
			width: 100vw;

			.banner_list {
				image {
					flex-shrink: 0;
					width: 96rpx;
					height: 96rpx;
					border-radius: 16rpx;
					margin-right: 16rpx;
					border: 4rpx solid transparent;
					display: block;
				}
			}

			#select {
				border: 4rpx solid #FD2A53;
			}
		}
	}

	.body {
		position: relative;
		z-index: 2;
		width: 750rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -150rpx;
		background: url(https://qiniu-cdn.maeiyun.com//h5static/partner/card_preview_user_bg.png) 0 0 no-repeat;
		background-color: #FFF;
		background-size: 100%;
		padding: 0 0 0;
		overflow: hidden;

		.user {
			overflow: hidden;
			padding: 0 32rpx;
			width: 100%;
			margin-top: 48rpx;

			.info {
				overflow: hidden;
				flex: 1;

				.avatar {
					position: relative;
					width: 128rpx;
					height: 128rpx;
					margin-right: 16rpx;

					.image {
						width: 128rpx;
						height: 128rpx;
						border-radius: 64rpx;
					}

					.icon {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: 0;
						bottom: 0;
					}

				}

				.text {
					flex: 1;
					overflow: hidden;

					.top {
						view {
							font-weight: 500;
							font-size: 30rpx;
							color: #131313;
							max-width: 200rpx;
						}

						text {
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							margin: 0 12rpx 0 24rpx;
						}

						image {
							width: 20rpx;
							height: 20rpx;
						}
					}

					.bottom {
						image {
							width: 20rpx;
							height: 20rpx;
						}

						text {
							font-size: 24rpx;
							color: #131313;
							margin-left: 10rpx;
						}
					}
				}
			}

			.button {
				margin-left: 16rpx;
				.item {
					width: 144rpx;
					height: 56rpx;
					background: #FFF8F9;
					border-radius: 12rpx;
					border: 2rpx solid #FFEAEE;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 6rpx;
						display: block;
					}

					.h30 {
						width: 36rpx;
						height: 30rpx;
					}

					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #FD2A53;
					}
				}

				.have {
					background: #F1F1F1;

					text {
						color: #131313;
					}
				}
			}
		}

		.title {
			padding: 0 32rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			line-height: 50rpx;
			margin: 40rpx 0 20rpx;
		}

		.price {
			align-items: flex-end;
			padding: 0 32rpx 24rpx;
			border-bottom: 2rpx solid #F1F1F1;

			view {
				font-weight: 600;
				font-size: 48rpx;
				color: #FD2A53;
				line-height: 56rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 24rpx;
				color: #131313;
				line-height: 40rpx;
			}
		}

		.list {
			margin-top: 34rpx;
			padding: 0 32rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}

			text {
				font-size: 26rpx;
				color: #131313;
				line-height: 36rpx;
			}
		}

		.line {
			width: 100%;
			height: 16rpx;
			background: #F1F1F1;
			margin: 30rpx 0;
		}

		.more {
			overflow: hidden;
			margin: 0 32rpx;

			.list {
				overflow: hidden;
				height: 144rpx;
				background: #F1F1F1;
				border-radius: 24rpx;

				.user_info {
					flex: 1;

					.avatar {
						width: 88rpx;
						height: 88rpx;
						background: #D8D8D8;
						border-radius: 44rpx;
						overflow: hidden;
						margin-right: 16rpx;

						image {
							width: 88rpx;
							height: 88rpx;
						}
					}

					.text {
						flex: 1;

						.nickname {
							font-weight: 600;
							font-size: 28rpx;
							color: #131313;
						}

						.icon_text {

							text {
								font-size: 24rpx;
								color: #666666;
								line-height: 34rpx;
								margin: 0 12rpx 0 0;
							}

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}
					}
				}

				.list_btn {
					width: 144rpx;
					height: 56rpx;
					background: #FD2A53;
					border-radius: 12rpx;
					margin-left: 16rpx;

					text {
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
					}
				}
			}

			.more_block {
				padding: 32rpx 0;
				border-bottom: 2rpx solid #F1F1F1;

				.more_btn {
					text {
						font-size: 26rpx;
						color: #131313;
						line-height: 36rpx;
					}
				}
			}

		}

		.people {
			padding: 0 32rpx;

			.people_title {
				font-weight: 600;
				font-size: 32rpx;
				color: #131313;
				line-height: 44rpx;
				margin-bottom: 40rpx;
			}

			.people_list {
				scroll-view {
					width: 100%;
				}

				.people_item {
					width: 100rpx;
					margin-right: 20rpx;

					.people_avatar {
						width: 96rpx;
						height: 96rpx;

						image {
							width: 96rpx;
							height: 96rpx;
							border-radius: 48rpx;
						}
					}

					text {
						width: 100rpx;
						text-align: center;
						font-size: 26rpx;
						color: #131313;
					}
				}
			}
		}

		.rich {
			margin-top: 40rpx;
			padding: 0 32rpx;

			.rich_title {
				font-weight: 600;
				font-size: 32rpx;
				color: #131313;
				line-height: 44rpx;
				margin-bottom: 32rpx;
			}

			.rich_content {
				textarea {
					width: 100%;
					font-size: 26rpx;
					color: #333333;
					line-height: 44rpx;
				}
			}
		}
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;
	
		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}
	
		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;
	
			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}
	
		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;
	
			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	
	}
	
</style>